<template>
    <div class="EditCodeDialog">
        <el-dialog
            v-model="dialogVisible"
            title="编辑"
            width="50%"
            :close-on-click-modal="false"
            :destroy-on-close="true" 
            :with-header="false"
            :close-on-press-escap="false"
            :append-to-body="false"
            :show-close="false"
        > 
            <JSONEditor v-model="codeString" :type="codeType" style="padding-left: 20px; padding-right:30px; padding-bottom: 20px; height: 300px;"></JSONEditor>
            <div style="width: 100%; text-align: left; padding-left: 20px; padding-bottom: 20px; box-sizing: border-box;">
                <el-button type="primary" @click="onClickSave">保存</el-button>
                <el-button @click="onCancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits,watch,computed, onMounted, reactive } from 'vue'
import JSONEditor from './JSONEditor.vue'
const props =defineProps<{ modelValue: boolean, type: string, code:string}>();
const dialogVisible = computed(()=> props.modelValue );

const codeString = ref(props.code);
const codeType = ref(props.type);

let defaultCSS = "";
const emit = defineEmits(['update:modelValue', 'update:code'])

onMounted(()=>{

})


const handleClose = ()=>{
    console.log('[EditCodeDialog]Close')
    emit('update:modelValue', false);
}

const onClickSave = () => {
    emit('update:code', codeString.value);
    handleClose();
}

const onCancel = () => {
    handleClose();
}
</script>
<style>


.EditCodeDialog .el-dialog__body{
    padding: 0px !important;
}

</style>
